<template>
  <nut-sticky offset-top="0" custom-nav-height="0">
    <div flex flex-a-c p-46px overflow-x-auto w-1080px box-border bg="#fff">
      <div
        @click="handleClick(item, index)"
        v-for="(item, index) in props.res.data.category"
        :key="index"
        flex
        flex-items-center
        flex-col
        shrink-0
        px-29px
        text-center
        cursor-pointer
      >
        <div
          font-bold
          text-48px
          shrink-0
          :class="{ 'text-58px': current === index }"
          :style="{
            color:
              current === index
                ? props.res.data.activeTColor
                : props.res.data.titleColor
          }"
        >
          {{ item.title }}
        </div>
        <div
          h-14px
          w-115px
          mt-15px
          rounded-14px
          :style="{
            backgroundColor:
              current === index ? props.res.data.lineColor : 'transparent'
          }"
        ></div>
      </div>
    </div>
  </nut-sticky>
  <z-paging
    ref="paging"
    v-model="dataList"
    use-page-scroll
    @query="queryList"
    :refresher-enabled="false"
    :loading-more-title-custom-style="{ fontSize: '36px', marginTop: '60px' }"
    :empty-view-img-style="{ width: '400px', height: '400px' }"
    :empty-view-title-style="{ fontSize: '40px' }"
  >
    <div
      w-full
      box-border
      px-60px
      :class="{ 'row-1-col-2': classifyStyle == '2' }"
    >
      <template v-for="(item, index) in dataList">
        <article_item
          :item="item"
          :classifyStyle="classifyStyle"
          @click="clickSwiper(item)"
        ></article_item>
      </template>
    </div>
  </z-paging>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getArticleListByClassifyId } from '@/api/index'
import article_item from '@/components/article-item/index.vue' //轮播图
import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'

const props = defineProps<{
  res: any
}>()
const paging = ref<any>(null)
console.log('分类的数据', props.res)
const classifyStyle = ref('1')
const dataList = ref<any>([])
const current = ref<number>(0)
const total = ref<number>(0)
const query = ref({
  classifyId: props.res.data.category[0].classifyId,
  pageNum: 1,
  pageSize: 5
})
useZPaging(paging)
const queryList = (pageNo: number, pageSize: number) => {
  // 此处请求仅为演示，请替换为自己项目中的请求
  getArticleListByClassifyId({
    ...query.value,
    pageNum: pageNo,
    pageSize: pageSize
  })
    .then((res: any) => {
      paging.value.complete(res.data.list)
    })
    .catch((res) => {
      paging.value.complete(false)
    })
}

function handleClick(val: any, index: number) {
  current.value = index
  query.value.classifyId = val.classifyId
  classifyStyle.value = val.classifyStyle
  paging.value.reload()
}

function clickSwiper(item: any) {
  uni.navigateTo({
    url: '/pages/p?contentId=' + item.contentId
  })
}

function loadMore() {
  console.log('子组件加载更多')
  paging.value.pageReachBottom()
}

function pageScroll(e: any) {
  paging.value.updatePageScrollTop(e.scrollTop)
}

onMounted(() => {
  classifyStyle.value = props.res.data.category[0].classifyStyle
})
defineExpose({
  loadMore, // 暴露 loadMore 方法给父组件
  pageScroll
})
</script>
<style>
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
</style>
<style scoped>
/* 一行两列的样式 */
.row-1-col-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
</style>
